<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .header, .footer {
      width: 1200px;
      margin: 0 auto;
      background-color: skyblue;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
      height: 120px;
      color: #fff;
    }

    .footer {
      height: 300px;
    }

    ul, li {
      list-style: none;
    }

    ul {
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      justify-content: space-between;
      padding-top: 10px;
    }

    li {
      width: 290px;
      border: 1px solid #333;
      margin-bottom: 10px;
      padding: 5px;
      box-sizing: border-box;
    }

    li > a > img {
      width: 278px;
      display: block;
    }

    .loading {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      display: none;
    }
  </style>
</head>
<body>

  <div class="header">网页头部</div>
  <ul>
    <!-- JS 渲染 -->
  </ul>
  <div class="loading">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e1f35ad46d23a8012040293d688a.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663139598&t=fc70b8c2e4954ae6abe7e0db7657b7ff" alt="">
  </div>
  <div class="footer">网页底部</div>

  <!-- 

    约定:
        1.每页4条
        思考 什么时候需要取加载下一页?

        滚动条很敏感 处理数据太快
        目标  一页一页的加载 而不是 已下载全部页面全出来 

        使用超时定时器 模拟网络加载 
        多长时间以后去加载 
    需求:
        滚动条滚动到指定的位置  加载一部分数据出来 
        也是分页的一种 后一页的数据填充在上一页数据的后边 


    分析:
        准备一个函数 
            函数中做的事情:
            1. 从原数数据中截取一部分数据 渲染页面  (原数组不能变)
                截取的数据 根据 当前第几页 每页显示的条数 
        打开页面 执行上面的函数 

        随着滚动条的滚动加载下一页的数据 
        注意: 下一页是拼接在上一页的后边  不是替换 



        技术实现:
            1.滚动条操作 一定用到浏览器的滚动事件 
            2.写函数  加载下一页  
            3.判断什么时候加载 
            4.使用定时器模拟网络加载环境 
            5.每次加载一页  不是所有的页全部出来  



   -->
   <script src="./01taobao.js"></script>
   <script>
    // window.onscroll = function(){
    //     console.log('滚啊滚');
    // }
    var current = 1; //当前页
    var pagesize = 4; // 每页显示的条数
    var ulele = document.querySelector('ul'); // ul元素
    var flag = true; // 准备一个开关  默认是true
    var total = Math.ceil(res.length / pagesize);
    var loadingbox = document.querySelector('.loading');
    function bindhtml(){
        // 从总数据中截取这一页的数据
        var bindlist = res.slice((current-1)*pagesize,current*pagesize)
        // 渲染到页面上 
        //  这里不是替换上一页的内容 而是追加在上一页的后边  
        ulele.innerHTML += bindlist.reduce(function(prev,item){
            return prev + `
            <li>
                <a href="${item.detail_url}"><img src="${item.pic_url}
                    " alt=""></a>
                <p>${item.title}</p>
                <p>价格:${item.price}</p>
                <p>销量:${item.sales}</p>
                <p>店名:${item.seller_nick}</p>
                <p>更新时间:${item.data_update}</p>
            </li>
            
            `
        },'');
    }

    bindhtml(); //打开浏览器加载第一页

    window.onscroll = function(){
        if(current >= total){
            return;
        }
        // 可视化窗口的高度 
        // dom级别 不含滚动条
        // bom级别 含滚动条 
        var windowHeight = document.documentElement.clientHeight;

        // 卷取的高度 
        var scrollTop =  document.documentElement.scrollTop || document.body.scrollTop;


        // 元素的尺寸 
        var ulHeight = ulele.offsetHeight;
        // 元素的偏移量
        var ulTop =  ulele.offsetTop;
       if(windowHeight+scrollTop  <=   ulHeight+ulTop) return;
       if(flag == false) return; // 如果flag 是false 说明已经有定时器再执行了
        console.log('满足条件,加载下一页');
        loadingbox.style.display = 'flex';
        // 走到这 说明 没有其他定时器  这个定时可以执行;
        //防止别的定时器执行  
        flag = false;
    //    current++;   这样加载数据太快  因为加载的本地数据   
    //    bindhtml();  我们想有个延时的效果   用超时定时器 模拟 
    // 多长时间以后去加载下一页 
       setTimeout(function(){
            current++; 
            bindhtml();
            // 这一页已经给你加载了  隐藏这个图片
            loadingbox.style.display = 'none';
            flag = true;
       },Math.floor(Math.random()*3001+2000));


       // 滚动条 依次滚动  触发了满足条件的多次事件   
       // 每次事件一个定时器 
       // 每个定时器  页码+1 加载这一页的数据


    //    我们的目标是 一次加载一页  
    //    上面  因为依次滚动触发了多个事件  每个事件一个定时器 
    //    也就造成 依次加载了好几页的 数据 


    // 如何保证以此只加载一页 
    }





   </script>
  </body>

  </html>